<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 500px;height: 500px;">
        <div id="datePlugin" class="container">
            <div class="date-header">
                <div id="prevMonth">⟪</div>
                <div><span id="year"></span><span id="month"></span></div>
                <div id="nextMonth">⟫</div>
            </div>
            <div class="date-body">
                <div class="date-body-header">
                    <div>日</div>
                    <div>一</div>
                    <div>二</div>
                    <div>三</div>
                    <div>四</div>
                    <div>五</div>
                    <div>六</div>
                </div>
                <div class="date-body-content">
                    <ul id="dateList">

                    </ul>
                </div>
            </div>
        </div>
        <style>
            .container {
                width: 100%;
                height: auto;
                position: relative;
                background: #6d4e20;
                padding: 0 20px;
                border-radius: 10px;
                box-sizing: border-box;
                color: #fff;
            }

            .date-header {
                width: 100%;
                height: 50px;
                background: #6d4e20;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                box-sizing: border-box;
                color: #fff;
            }

            #nextMonth,
            #prevMonth {
                cursor: pointer;
            }

            .date-body-header {
                width: 100%;
                height: 50px;
                background: #6d4e20;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .date-body-header div {
                width: 14.28%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 16px;
            }

            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-wrap: wrap;
            }

            ul li {
                width: 14.28%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
            }
        </style>
        <script>
            class DatePlugin {
                constructor({ el }) {
                    this.el = el;//插件挂载的元素
                    this.date = new Date();
                    this.weekArr = ['日', '一', '二', '三', '四', '五', '六'];
                    this.currentMonthArr = [];//当前月份所占的天数
                    this.prevMonthArr = [];//上个月所占的天数
                    this.nextMonthArr = [];//下个月所占的天数
                    this.init()
                }
                // 获取当前年份
                getYear() {
                    return this.date.getFullYear();
                }
                // 获取当前月份
                getMonth() {
                    return this.date.getMonth() + 1;
                }
                // 获取当前月份的天数
                getMonthDay() {
                    return new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDate();
                }
                // 获取当前月份的上个月所占的天数
                getPreMonthArr() {
                    var time = new Date(this.date);//获取当前时间
                    time.setDate(1);//设置当前时间为本月1号
                    var week = time.getDay();//获取本月1号是星期几
                    var day = week;//如果是0，说明数字第一行需要空出来放上一个月的时间
                    time.setDate(0);//设置当前时间为上个月的最后一天
                    var maxDay = time.getDate();//得到上一个月的最后一天时间
                    for (var i = maxDay; i > maxDay - day; i--) {//循环得到上个月所占的天数
                        this.prevMonthArr.unshift(i);
                    }
                }
                // 获取当前月份所占的天数
                getCurrentMonthArr() {
                    for (var i = 1; i <= this.getMonthDay(); i++) {
                        this.currentMonthArr.push(i);
                    }
                }
                // 获取当前月份的下个月所占的天数
                getNextMonthArr() {
                    for (var i = 1; i <= 42 - this.currentMonthArr.length - this.prevMonthArr.length; i++) {
                        this.nextMonthArr.push(i);
                    }
                }
                //初始化
                init() {
                    this.currentMonthArr = [];
                    this.prevMonthArr = [];
                    this.nextMonthArr = [];
                    this.getPreMonthArr();
                    this.getCurrentMonthArr();
                    this.getNextMonthArr();
                    document.getElementById('year').innerHTML = this.getYear() + '年';
                    document.getElementById('month').innerHTML = this.getMonth() + '月';
                    this.render()
                }
                //渲染到页面DOM元素下
                render() {
                    var Dom_id = document.getElementById(this.el);
                    Dom_id.innerHTML = '';
                    //渲染上个月的日期
                    this.prevMonthArr.forEach(el => {
                        let li = document.createElement('li');
                        li.innerHTML = el;
                        li.style.color = 'red';
                        Dom_id.appendChild(li);
                    })
                    //渲染当前月份的日期
                    this.currentMonthArr.forEach(el => {
                        let li = document.createElement('li');
                        li.innerHTML = el;
                        Dom_id.appendChild(li);
                    })
                    //渲染下个月的日期
                    this.nextMonthArr.forEach(el => {
                        let li = document.createElement('li');
                        li.innerHTML = el;
                        li.style.color = 'red';
                        Dom_id.appendChild(li);
                    })
                }
                //设置时间为上个月
                prevMonth() {
                    this.date.setMonth(this.date.getMonth() - 1)
                    this.init();
                }
                //设置时间为下个月
                nextMonth() {
                    this.date.setMonth(this.date.getMonth() + 1)
                    this.init();
                }
            }
            var datePlugin = new DatePlugin({
                el: 'dateList'
            });
            document.getElementById('prevMonth').onclick = function () {
                datePlugin.prevMonth();
            }
            document.getElementById('nextMonth').onclick = function () {
                datePlugin.nextMonth();
            }

        </script>
</body>

</html>